<!--订单列表模块-->
<template>
<view class="order_item">
    <view class="list" wx:for="{{orderList}}" wx:key="index,item">
        <view class="order_top">
            <view @tap="btnFun" data-index="{{index}}" data-way="{{way}}" data-state="{{item.state}}" data-orId="{{item.orderId}}" class="order_state {{item.btnShow ? 'col2':''}}" formType="submit">{{item.failName}}</view>
        </view>
        <view class="item_content" @tap="saveDetail" data-index="{{index}}">
            <view class="order_list_top">
                <view class="left_image">
                    <image src="{{item.topicImage}}" data-src="{{item.topicImage}}" class="slide-image"  />
                </view>
                <view class="left">
                    <view class="left_content">
                        <text class="order_doc">{{item.goodsName}}</text>
                    </view>
                    <view class="left_content">
                        <text class="order_doc">{{item.goodsSize}}</text>
                    </view>
                </view>
                <view wx:if="{{way == 1 && item.state == 'WAIT_SELLER_SEND'}}" catchtap="btnFun" data-index="{{index}}" data-way="{{way}}" data-state="{{item.state}}" data-orId="{{item.orderId}}" class="order_state col2" formType="submit">发货</view>
            </view>
            <view class="order_price" >
                成交价： <text>￥{{item.amount}}</text>
            </view>
        </view>
    </view>
</view>
</template>
<script>
import wepy from 'wepy'
import tip from '@/utils/tip'
import api from '@/api/api';
import { ORDERDETAIL } from '@/utils/constant';

export default class orderItem extends wepy.component {
    props = {}
    data = {
        orderList: [],
        way: 0
    }
    events = {}
    methods = {
        eachItem(r) {
            const t = this;
            if (r) {
                r.forEach((c,i)=>{
                    r[i]['failName'] = t.getThisName(c).name;
                    r[i]['btnShow'] = t.getThisName(c).btnShow;
                });
                t.orderList = r;
                t.$apply();
            }
        },
        eachFail(r) {
            const t = this;
            if (r) {
                t.way = r;
                t.$apply()
            }
        },
        saveDetail(e){
            const t = this;
            let i = e.currentTarget.dataset.index;
            t.orderList[i]['way'] = t.way;
            wx.setStorageSync(ORDERDETAIL,t.orderList[i]);
            wx.navigateTo({
                url: '/pages/order/ordDetails'
            })
        },
        btnFun(e){
            const t = this;
            let s = e.currentTarget.dataset.state,
                w = e.currentTarget.dataset.way,
                o = e.currentTarget.dataset.orid,
                i = e.currentTarget.dataset.index;
            //待付款
            if(w == 0 && s == "WAIT_PAY"){
                wx.setStorageSync(ORDERDETAIL,t.orderList[i]);
                wx.navigateTo({
                    url: '/pages/personalCenter/purOrder'
                })
            }
            //确认收货
            if(w == 0 && s == "PLATFORM_SEND"){
                wx.showModal({
                    content: '确认收货？',
                    success(r){
                        if(r.confirm){
                            t.showLoading = true;
                            t.buyerReceiveFun(o);
                        }
                    }
                });
            }
            //输入物流单号
            if(w == 1 && s == "WAIT_SELLER_SEND"){
                t.$emit("sendOrd",o);
            }
        }
    }
    onLoad (){
        const t = this;
        let userId = wx.getStorageSync('userId');
        if (userId) {
            t.userId = userId;
        }
    }
    getThisName(cur){
        const t = this;
        let obj = {};
        if (cur.state == 'WAIT_PAY') {
            if (t.way == 0) {
                obj.name = '待付款'
                obj.btnShow = true;
            }else {
                obj.name = '待付款'
                obj.btnShow = false;
            }
        } else if (cur.state == 'WAIT_SELLER_SEND') {
            if (t.way == 0) {
                obj.name = '待卖家发货'
                obj.btnShow = false;
            }
        } else if (cur.state == 'SELLER_SEND') {
            obj.name = '卖家已发货'
            obj.btnShow = false;
        } else if (cur.state == 'PLATFORM_IDENTIFY') {
            obj.name = '平台鉴定中'
            obj.btnShow = false;
        } else if (cur.state == 'PLATFORM_SEND') {
            obj.name = '确认收货'
            obj.btnShow = true;
        } else if (cur.state == 'RECEIVED') {
            obj.name = '已收货'
            obj.btnShow = false;
        } else if (cur.state == 'FAIL') {
            switch (cur.failType) {
                case 'BUYER_NO_PAY':
                    obj.name = '买家未付款'
                    break;
                case 'SELLER_NO_SEND':
                    obj.name = '卖家未发货'
                    break;
                case 'FAKE':
                    obj.name = '鉴定为徦'
                    break;
                case 'BUYER_RETURN':
                    obj.name = '买家退货'
                    break;
            }
            obj.btnShow = false;
        }
        return obj;
    }
    // 确认收货
    async buyerReceiveFun(o) {
        const t = this;
        const json = await api.buyerReceive({},o);
        if (json.data.code == 0) {
            tip.success('确认收货成功！！',2000);
            t.$emit("currentTab",5);
            t.showLoading = false;
        } else {
            tip.error(json.data.msg);
        }
    }
}

</script>
<style lang="less">
.order_item {
  background: #f7f7f7;
  margin-bottom: 220rpx;
    .modal{
        position: relative;
        z-index: 9999999;
    }
  .order_top{
      border-bottom: 1px solid #efefef;
      text-align: right;
      .order_state{
          display: inline-block;
          padding: 4px 8px;
          font-size: 12px;
          line-height: normal;
          background: none;
          color: #ffb025;
          border: none;
          margin-bottom: 10rpx;
          border-radius: 5rpx;
      }
      .order_state.col2{
          background-color: #ffb025;
          color:#eee;
      }
  }
  .title {
    font-size: 26rpx;
    color: #333;
  }

  .mt10 {
    margin-top: 10rpx;
  }
  .order_price {
      width: 100%;
      text-align: right;
      padding: 10rpx;
      font-size: 26rpx;
      text{
          color: #333;
          font-size: 32rpx;
      }
  }
  .order_list_top {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;

      .left_image{
          width: 30%;
          height: 200rpx;
          border: 1px solid #e3e3e3;
          .slide-image{
              width: 100%;
              height: 100%;
          }
      }
      .left{
          width: 70%;
          height: 200rpx;
          padding-left:20rpx;
          .left_content:first-child{
              height: 140rpx;
          }
          .slide-image{
              width: 100%;
          }
          .order_doc {
              margin-right: 20px;
              font-size: 26rpx;
              color: #808080;
          }
      }
  }
  .order_list_footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 20rpx;
    .num {
      color: #ff4856;
    }
  }
  .order_list_top {
      position: relative;
    padding-top: 26rpx;
    padding-bottom: 26rpx;
    border-bottom: 1px solid #efefef;
    .order_state{
      position: absolute;
      right: 0;
      bottom: 20rpx;
      display: inline-block;
      padding: 4px 8px;
      font-size: 12px;
      line-height: normal;
      background: none;
      color: #ffb025;
      border: none;
      margin-bottom: 10rpx;
      border-radius: 5rpx;
  }
  .order_state.col2{
  background-color: #ffb025;
  color:#eee;
  }
  }
  .list {
    background: #fff;
    padding:10rpx 30rpx;
    margin-bottom: 15rpx;
  }
  .btn_group {
    display: flex;
    align-items: center;
    .btn {
      font-size: 30rpx;
      padding: 22rpx 35rpx;
      text-align: center;
      margin: 0 auto;
      width: 100%;
      -moz-border-radius: 15rpx;
      /* Firefox */
      -webkit-border-radius: 15rpx;
      /* Safari 和 Chrome */
      border-radius: 15rpx;
      /* Opera 10.5+, 以及使用了IE-CSS3的IE浏览器 */
    }
    .btn_del {
      color: #333;
      border: 1px solid #ccc;
    }
    .btn_pay {
      background: #ff4856;
      color: #fff;
      margin-left: 20rpx;
    }
  }
}

</style>
